<template>
  <div class="viewUpdateStrategy">
    <full-parent-dom-with-dask :loading="spinningLoading"></full-parent-dom-with-dask>
    <a-form-model
      ref="formComp"
      :model="formData"
      layout="horizontal"
      class="AsteriskAfter newEditStyle viewUpdateStrategyForm"
    >
      <a-row :gutter="40">
        <a-col :md="24" :sm="24">
          <a-form-model-item :label="$t('policyName')" class="customFormModelItem bd" prop="name">
            <div>{{ formData.name || '-' }}</div>
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row :gutter="40">
        <a-col :md="12" :sm="24">
          <!-- 车型 -->
          <a-form-model-item class="customFormModelItem" :label="$t('vehicleModel')" prop="modelId">
            {{ formData.modelInfo || '-' }}
          </a-form-model-item>
        </a-col>
        <a-col :md="12" :sm="24">
          <!-- 车辆版本 -->
          <a-form-model-item class="customFormModelItem" :label="$t('smartDrivingDomainVersion')" prop="vehicleVersionId">
            {{ formData.vehicleVersionName || '-' }}
          </a-form-model-item>
        </a-col>
        <a-col :span="24">
          <div class="spaceBox"></div>
        </a-col>
      </a-row>
      <!-- 选择车辆版本end -->
    </a-form-model>
    <div class="viewUpdateStrategyVehicleVersionLists">
      <view-ecu-version-config :ecuVersionLists="ecuVersions" :loading="loadingEcuVersions"></view-ecu-version-config>
    </div>
  </div>
</template>
<script>
import FullParentDomWithDask from '@/components/LoadDataSpin/FullParentDomWithDask.vue'
import ViewEcuVersionConfig from '@/views/software/vehicleVersion/components/ViewEcuVersionConfig.vue'
import lodash from 'lodash'
const strategyInitFormData = {
  name: '',
  modelInfo: '',
  vehicleVersionName: '',
  modelId: '',
  conditionStrategyId: ''
}
export default {
  components: {
    FullParentDomWithDask,
    ViewEcuVersionConfig
  },
  props: {
    id: {
      type: String,
      default: ''
    },
    time: {
      type: Number,
      default: 78140
    },
    isCopy: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    vehicleVersionSelectQuery () {
      return { modelId: this.formData.modelId }
    }
  },
  data () {
    return {
      formData: lodash.cloneDeep(strategyInitFormData),
      spinningLoading: false,
      // 当前版本对应的零件版本配置
      ecuVersions: [],
      loadingEcuVersions: false
    }
  },
  watch: {
    time: {
      handler () {
        this.resetFormData()
        if (this.id) {
          this.getDetailData()
        }
      },
      immediate: true
    }
  },
  methods: {
    // 获取当前车辆版本的零件配置
    getEcuVersionsData (vehicleVersionId, versionType) {
      this.ecuVersions = []
      if (!vehicleVersionId || this.loadingEcuVersions) {
        return
      }
      this.loadingEcuVersions = true
      this.$store
        .dispatch('getVehicleVersionDetailData', { id: vehicleVersionId, versionType, isOnlyEcuVersion: true })
        .then((res) => {
          this.ecuVersions = res
        })
        .finally(() => {
          this.loadingEcuVersions = false
        })
    },
    // 获取详情数据
    getDetailData () {
      this.spinningLoading = true
      this.$store
        .dispatch('getStrategyDetailData', {id:this.id})
        .then((res) => {
          const { data } = res
          if (data) {
            this.formData.id = this.isCopy ? '' : this.id
            if (this.formData.id) {
              this.formData.name = data.name
            }
            this.formData.conditionStrategyId = data.conditionStrategyId
            this.formData.type = 1
            let modelInfo = data.modelCode || ''
            modelInfo += data.modelName ? '[' + data.modelName + ']' : ''
            modelInfo += data.trimLevel ? '[' + data.trimLevel + ']' : ''
            this.formData.modelInfo = modelInfo
            this.formData.vehicleVersionName = data.vehicleVersionName
            this.getEcuVersionsData(data.vehicleVersionId, data.versionType)
          }
        })
        .finally(() => {
          this.spinningLoading = false
        })
    },
    resetFormData () {
      this.formData = lodash.cloneDeep(strategyInitFormData)
    }
  }
}
</script>
<style scoped lang="less">
.viewUpdateStrategy {
  height: 100%;
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
  font-size: 12px;
  .viewUpdateStrategyForm {
    flex: none;
  }
  .viewUpdateStrategyVehicleVersionLists {
    flex: 1 0 0;
    min-height: 220px;
    margin-top: 10px;
  }
  .bd {
    border-bottom: 1px solid @borderColor;
  }
  .spaceBox {
    margin-top: -10px;
    border-top: 1px solid @borderColor;
  }
}
</style>
